<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://221.0.77.189:50/arcgis_js_api/library/3.14/esri/css/esri.css" />
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad:true,
            packages:[{
                name:"custom",
                location:"custom"
            },{
                name: "td",
                location: "js/tdlib"
            }]

        };
    </script>
    <script src="http://221.0.77.189:50/arcgis_js_api/library/3.14/init.js"></script>
    <script src="gistool.js"></script>
</head>
<body>
<button id="lkbtn">拉框查询</button>
<button id="removeEventLayer">清除事件图层</button>
<div>
    <p>先添加点</p>
    历史轨迹-回放速度<input id="txtSpeed" type="text" value="1" style="width:30px" /><input type="button" value="回放" id="playBtn"/>
</div>
<div id="map" style="width: 900px; height: 800px;">
</div>
<script>
    gisServerUrl = "http://221.0.77.189:6080/arcgis/rest/services/";
    gisResourceUrl = "http://221.0.77.189:50/gis_static_resource/";
    var map;
    var mlayers;
    var eventLayer;
    var msymbols;


    var points =[];
    var timer = null;
    var lineSymbol;
    var carSymbol;
    var carLayer;
    var lineLayer;



    require([
        "esri/map",
        "custom/util",
        "td/SDTDTLayer",
        'esri/layers/WebTiledLayer',
        "esri/layers/FeatureLayer",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/Color",
        "esri/renderers/SimpleRenderer",
        "esri/InfoTemplate",
        "esri/request",
        "esri/geometry/Point",
        "esri/SpatialReference",
        "esri/graphic",
        "dojo/dom",
        "esri/geometry/webMercatorUtils",
        "esri/tasks/query",
        "dojo/domReady!"
    ], function (
        Map, Util,SDTDTLayer,WebTiledLayer, FeatureLayer, SimpleMarkerSymbol,SimpleLineSymbol,Color,SimpleRenderer,InfoTemplate,esriRequest,Point,SpatialReference,Graphic,dom,webMercatorUtils,Query
    ) {
        map = new Map("map", {
            center: [120.467,37.240],
            zoom: 15,
            isScrollWheelZoom:true,
            logo:false
        });

        loadBaseMap(map);
        // loadLayers(map, function (layers, symbols) {
        //     mlayers = layers;
        //     msymbols = symbols;
        // });

        var centerLine = new FeatureLayer(gisServerUrl + "zyloads/MapServer/0",{
            mode:FeatureLayer.MODE_ONDEMAND,
            outFields:["*"],
            infoTemplate:null
        });
        map.addLayer(centerLine);

        //事件显示
        // vue(map,function (layer) {
        //     eventLayer = layer;
        // });

        //事件定位
        //freeze(map);
        //车辆定位
        //locateACar(map);

        //查找定位
        //Util.selectFeature(mlayers[440], "19000a1f9bf644db82e42612fb1030ce");
        // setTimeout(function () {
        //     selectFeature(map, mlayers[110], "5e8fda9a2138342128e6e523f4e6c57c", msymbols[110])
        // },300);

        //selectFeature(map, mlayers[440], "19000a1f9bf644db82e42612fb1030ce", msymbols[440])


        //拉框查询
        dom.byId("lkbtn").onclick = function () {
            var response;
            clearSelection(mlayers);
            frameSelection(mlayers, [440, 110, 550,30,210], function (result) {
                setTimeout(function () {
                    response = result;
                    console.log(response)
                },300)
            });
        };

        //历史轨迹
        // map.on("click",function (e) {
        //     points.push({x: e.mapPoint.x, y: e.mapPoint.y})
        //     var symbol = new SimpleMarkerSymbol({
        //         "color": [255,0,0,255],
        //         "size": 6,
        //         "angle": -30,
        //         "xoffset": 0,
        //         "yoffset": 0,
        //         "type": "esriSMS",
        //         "style": "esriSMSCircle",
        //         "outline": {
        //             "color": [0,0,0,255],
        //             "width": 0,
        //             "type": "esriSLS",
        //             "style": "esriSLSSolid"
        //         }
        //     });
        //     map.graphics.add(new Graphic(e.mapPoint,symbol))
        //
        // })

        dom.byId("playBtn").onclick = function () {
            var pointArr = [{x:120.361,y:37.386},{x:120.318,y:37.361},{x:120.278,y:37.444}];
            historicalTrack(map, pointArr, dom.byId(txtSpeed).value);
        }



        //距离，里程桩转换
        // mlayers[100].on("click", function (e) {
        //     var mapPoint = e.mapPoint
        //     var x = mapPoint.x
        //     var y = mapPoint.y
        //     var lxbm = e.graphic.attributes.LXBM
        //     console.log(lxbm, x, y)
        //     var layerUrl = "http://221.0.77.189:6080/arcgis/rest/services/GHROAD/MapServer/exts/MPointConverter/pointToM";
        //     var whereStr = "?lxbm=" + lxbm + "&x=" + x + "&y=" + y;
        //     layerUrl = layerUrl + whereStr;
        //     var layersRequest = esriRequest({
        //         url: layerUrl,
        //         content: { f: "json" },
        //         handleAs: "json",
        //         callbackParamName: "callback"
        //     });
        //     layersRequest.then(
        //         function(response) {
        //             var distance = response.message;
        //             var k = Math.floor(response.message/ 1000)
        //             var b = Math.floor(response.message % 1000)
        //             alert("里程: " + k + "K+" + b)
        //             console.log(response.message)
        //             getPoint(lxbm,response.message)
        //         }, function(error) {
        //             console.log("Error: ", error.message);
        //         });
        //
        // })
        //
        // function getPoint(lxbm,length) {
        //     var mToPointUrl = "http://172.19.66.55:6080/arcgis/rest/services/COUNTYLINE/MapServer/exts/MPointConverter/mToPoint";
        //     var whereStr = "?lxbm=" + lxbm + "&distance=" + length;
        //     mToPointUrl = mToPointUrl + whereStr;
        //     var mToPointProxy = esriRequest({
        //         url: mToPointUrl,
        //         content: {f : "json"},
        //         handleAs: "json",
        //         callbackParamName: "callback"
        //     })
        //
        //     mToPointProxy.then(function(result) {
        //         console.log(result)
        //         var arr = result.message.split(",")
        //         var point = new Point(arr[0], arr[1], map.spatialReference);
        //         var sms = new SimpleMarkerSymbol().setStyle(
        //             SimpleMarkerSymbol.STYLE_SQUARE).setColor(
        //             new Color([255,0,0,0.5]));
        //         var graphic = new Graphic(point,sms);
        //         map.graphics.add(graphic)
        //     })
        // }


        dom.byId("removeEventLayer").onclick = function(){
            if(eventLayer) {
                map.removeLayer(eventLayer);
            }

        }
    });
</script>
</body>
</html>
